<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">

	<title>IDMS-更懂你的宿舍助手</title>

	<!-- Main Styles -->
	<link rel="stylesheet" href="/static/assets/styles/style.min.css">
	
	<!-- Material Design Icon -->
	<link rel="stylesheet" href="/static/assets/fonts/material-design/css/materialdesignicons.css">

	<!-- mCustomScrollbar -->
	<link rel="stylesheet" href="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">

	<!-- Waves Effect -->
	<link rel="stylesheet" href="/static/assets/plugin/waves/waves.min.css">

	<!-- Dark Themes -->
	<link rel="stylesheet" href="/static/assets/styles/style-dark.min.css">

    <link rel="stylesheet" href="/static/assets/styles/extra.css">
</head>

<body>
<div class="main-menu">
	<header class="header">
		<a href="intime-moni.html" class="logo"><i class="ico mdi mdi-cube-outline"></i>IDMS 智能宿舍监控系统</a>
		<button type="button" class="button-close fa fa-times js__menu_close"></button>
		<div class="user">
			<a href="#" class="avatar"><img src="/static/assets/images/avatar-sm-5.jpg" alt=""><span class="status online"></span></a>
			<h5 class="name"><a href="profile.html">Denise Emily</a></h5>
			<h5 class="position">Administrator</h5>
			<!-- /.name -->
			<div class="control-wrap js__drop_down">
				<i class="fa fa-caret-down js__drop_down_button"></i>
				<div class="control-list">
					<div class="control-item"><a href="profile.html"><i class="fa fa-user"></i> Profile</a></div>
					<div class="control-item"><a href="#"><i class="fa fa-gear"></i> Settings</a></div>
					<div class="control-item"><a href="#"><i class="fa fa-sign-out"></i> Log out</a></div>
				</div>
				<!-- /.control-list -->
			</div>
			<!-- /.control-wrap -->
		</div>
		<!-- /.user -->
	</header>
	<!-- /.header -->
	<div class="content">

		<div class="navigation">
			<h5 class="title">主要功能</h5>
			<!-- /.title -->
			<ul class="menu js__accordion">
				<!-- <li class="current">
					<a class="waves-effect" href="index.html"><i class="menu-icon mdi mdi-view-dashboard"></i><span>Dashboard</span></a>
				</li> -->
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-video"></i><span>宿舍监控</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/intimeMoni">实时监控</a></li>
						<li><a href="/backMoni">录像回放</a></li>
						<li><a href="/break/viewBreak">闯入记录</a></li>
						<li><a href="/potentialDanger">潜在危险警告</a></li>
					</ul>
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-lightbulb-outline"></i><span>智慧宿舍</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/memberSpacing">舍员空间</a></li>
						<li><a href="/waterElecMoni">水电管控</a></li>
						<li><a href="/roomService">寝室维修</a></li>
						<li><a href="/tempHumidityMoni">温湿监控</a></li>
					</ul>
				</li>
				<li>
					<a class="waves-effect parent-item js__control" href="#"><i class="menu-icon mdi mdi-account-settings-variant"></i><span>个人空间</span><span class="menu-arrow fa fa-angle-down"></span></a>
					<ul class="sub-menu js__content">
						<li><a href="/personInfo">账号信息</a></li>
						<li><a href="/personBill">个人账单</a></li>
					</ul>
				</li>
			</ul>
			<!-- /.menu js__accordion -->
		</div>
		<!-- /.navigation -->
	</div>
	<!-- /.content -->
</div>
<!-- /.main-menu -->

<div class="fixed-navbar">
	<div class="pull-left">
		<button type="button" class="menu-mobile-button glyphicon glyphicon-menu-hamburger js__menu_mobile"></button>
		<h1 class="page-title">Home</h1>
		<!-- /.page-title -->
	</div>
	<!-- /.pull-left -->
	<div class="pull-right">
		<div class="ico-item">
			<a href="#" class="ico-item mdi mdi-magnify js__toggle_open" data-target="#searchform-header"></a>
			<form action="#" id="searchform-header" class="searchform js__toggle"><input type="search" placeholder="Search..." class="input-search"><button class="mdi mdi-magnify button-search" type="submit"></button></form>
			<!-- /.searchform -->
		</div>
		<!-- /.ico-item -->
		<a href="#" class="ico-item mdi mdi-email notice-alarm js__toggle_open" data-target="#message-popup"></a>
		<a href="#" class="ico-item pulse"><span class="ico-item mdi mdi-bell notice-alarm js__toggle_open" data-target="#notification-popup"></span></a>
		<a href="#" class="ico-item mdi mdi-logout js__logout"></a>
	</div>
	<!-- /.pull-right -->
</div>
<!-- /.fixed-navbar -->

<div id="notification-popup" class="notice-popup js__toggle" data-space="75">
	<h2 class="popup-title">Your Notifications</h2>
	<!-- /.popup-title -->
	<div class="content">

		<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
	</div>
	<!-- /.content -->
</div>
<!-- /#notification-popup -->

<div id="message-popup" class="notice-popup js__toggle" data-space="75">
	<h2 class="popup-title">Recent Messages<a href="#" class="pull-right text-danger">New message</a></h2>
	<!-- /.popup-title -->
	<div class="content">
		<ul class="notice-list">
			<li>
				<a href="#">
					<span class="avatar"><img src="/static/assets/images/avatar-sm-1.jpg" alt=""></span>
					<span class="name">John Doe</span>
					<span class="desc">Amet odio neque nobis consequuntur consequatur a quae, impedit facere repellat voluptates.</span>
					<span class="time">10 min</span>
				</a>
			</li>
		</ul>
		<!-- /.notice-list -->
		<a href="#" class="notice-read-more">See more messages <i class="fa fa-angle-down"></i></a>
	</div>
	<!-- /.content -->
</div>
<!-- /#message-popup -->

<div id="wrapper">
	<div class="main-content">
		<div class="row small-spacing">
			<div class="col-xs-12 breakin-table">
				<div class="box-content">
					<h4 class="box-title">今日闯入记录(黄色：警告；红色：危险)</h4>
                    <table class="table table-hover">
						<thead>
							<tr>
								<th>#</th>
								<th>闯入时间</th> 
								<th>是否可识别为舍员</th> 
								<th>警告</th>
                                <th>操作</th>
							</tr> 
						</thead> 
						<tbody>

                        {% for breakItem in breakList %}
                            <tr>
                                    <td>{{ breakItem.breakid }}</td>
                                    <td>{{ breakItem.entertime }}</td>
                                    <td>{{ breakItem.isMember }}</td>
                                    <td>{{ breakItem.level }}</td>
                                    <td>{{ breakItem.level }}</td>
                                    <td><button type="button" class="btn btn-warning btn-bordered btn-xs waves-effect waves-light">详情</button></td>
                            </tr>
                        {% endfor %}
                        </tbody>
					</table>
				</div>
				<!-- /.box-content -->
			</div>

			<div class="col-lg-6 col-xs-12 breakin-pic unshow">
				<div class="box-content card white">
					<h4 class="box-title">
                        闯入拍照
                    </h4>
					<!-- /.box-title -->
					<div class="card-content">
						<div class="breaker-pic">
							<img src="/static/assets/images/gallery/our-gallery-5.jpg" alt="">
						</div>
					</div>
					<!-- /.card-content -->
				</div>
				<!-- /.box-content -->
			</div>

			<div class="col-lg-6 col-xs-12 breakin-info unshow">
				<div class="box-content card white">
					<h4 class="box-title">
                        相关信息
                    </h4>
					<!-- /.box-title -->
					<div class="card-content">
						<table class="table table-hover">
							<thead>
								<tr>
									<th>信息字段</th>
									<th>描述</th>
								</tr> 
							</thead> 
							<tbody>
							</tbody>
						</table>

                        <button type="button" class="btn btn-primary btn-bordered btn-xs waves-effect waves-light turn-back">返回</button>
						<button type="button" class="btn btn-primary btn-bordered btn-xs waves-effect waves-light ignore">忽略</button>
						<button type="button" class="btn btn-danger btn-bordered btn-xs waves-effect waves-light make-danger">列为危险</button>
					</div>
					<!-- /.card-content -->
				</div>
				<!-- /.box-content -->
			</div>

            <div style="display: none" class="col-xs-12 breakin-info">
                <div class="box-content">
                    <h4 class="box-title">详细信息</h4>
                </div>
            </div>
			<!-- /.col-xs-12 -->
		</div>
		<!-- /.row -->

		<footer class="footer">
			<ul class="list-inline">
				<li>Copyright &copy; 2021.SE Master All rights reserved.</li>
				<li><a href="#">Terms</a></li>
				<li><a href="#">Help</a></li>
			</ul>
		</footer>
	</div>
	<!-- /.main-content -->
</div>
<!--/#wrapper -->
	
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
		<script src="/static/assets/script/html5shiv.min.js"></script>
		<script src="/static/assets/script/respond.min.js"></script>
	<![endif]-->
	<!-- 
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="/static/assets/scripts/jquery.min.js"></script>
	<script src="/static/assets/scripts/modernizr.min.js"></script>
	<script src="/static/assets/plugin/bootstrap/js/bootstrap.min.js"></script>
	<script src="/static/assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/static/assets/plugin/nprogress/nprogress.js"></script>
	<script src="/static/assets/plugin/sweet-alert/sweetalert.min.js"></script>
	<script src="/static/assets/plugin/waves/waves.min.js"></script>

	<script src="/static/assets/scripts/main.min.js"></script>

    <div>
	<script>
		$(() => {
			//let size = 3;
			//for(let i=0;i<size;i++){
			//	$('#wrapper .breakin-table tbody').append('<tr><th scope="row">'+(i+1)+'</th>'+
			//		'<td>'+'no'+'</td>'+
			//		'<td>'+'yes'+'</td>'+
			//		'<td>'+'yes'+'</td>'+
			//		'<td>'+'<button type="button" class="btn btn-warning btn-bordered btn-xs waves-effect waves-light">详情</button>'+'</td></tr>')
			//}

			$('#wrapper .breakin-table tbody button').on('click', () => {

				// $.ajax({
				// 	type: "GET",
				// 	url: "",
				// 	success: (data) => {

				// 	}
				// });

				$('#wrapper .breakin-table').addClass('unshow');

				$('#wrapper .breakin-pic').removeClass('unshow');
				$('#wrapper .breakin-info').removeClass('unshow');
			});

			$('#wrapper .breakin-info .btn-primary').on('click', () => {
				// 删除该记录
			});

			$('#wrapper .breakin-info .btn-danger').on('click', () => {
				// 修改级别
			});

			$('#wrapper .breakin-info .turn-back').on('click', () => {

			    $('#wrapper .breakin-info tbody').empty();

				$('#wrapper .breakin-table').removeClass('unshow');

				$('#wrapper .breakin-pic').addClass('unshow');
				$('#wrapper .breakin-info').addClass('unshow');
			});

			// $.ajax({
			// 	type: "GET",
			// 	url: "",
			// 	success: (data) => {

			// 	}
			// });

			/*$('#wrapper .breakin-info tbody').append(
				'<tr><td>'+'闯入时间'+'</td><td>'+'2021.5.14/14:25'+'</td></tr>'+
				'<tr><td>'+'舍员识别'+'</td><td>'+'不是舍员'+'</td></tr>'+
				'<tr><td>'+'逗留时长'+'</td><td>'+'3 min'+'</td></tr>'+
				'<tr><td>'+'警告信息'+'</td><td>'+'此人是舍员家长'+'</td></tr>'+
				'<tr><td>'+'级别'+'</td><td>'+'警告'+'</td></tr>'
			);*/
		});
	</script>
</div>


</body>
</html>